<template>
  <div>
   <el-menu default-active="1-4-1" 
            class="el-menu-vertical-demo" 
            @open="handleOpen" 
            @close="handleClose" 
            :collapse="iscollapsMenu"
            text-color= "#fff"
            background-color="#666"
            active-text-color="red"
            >
      <h3>{{title}}</h3>
      <el-menu-item 
        :index="item.name" 
        v-for="item in noChildren" 
        :key = 'item.name'
        @click="handleMenu(item)"
      >
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>
      <!-- <el-menu-item
          v-for="item in hasChildren" 
          :key='item.lable' 
          :index="item.label"
          @click="handleMenu(item)"
          active-text-color="red"
      > -->
          <el-submenu 
            v-for="item in hasChildren" 
            :key='item.lable' 
            :index="item.label"
            active-text-color="red"
          >
            <template slot="title">
                <i :class="`el-icon-${item.icon}`"></i>
                <span slot="title" >{{item.label}}</span> 
            </template>
            <el-menu-item 
              v-for="sonItem in item.children" 
              :key='sonItem.label' 
              :index='sonItem.label'
              @click="handleMenu(sonItem)" 
            >
            {{sonItem.label}}
            </el-menu-item>
        </el-submenu>
      <!-- </el-menu-item> -->
  </el-menu>

  </div>
</template>
<script>
  export default {
    name:'CommonAside',
    data() {
      return {
        cur:[],
        mycur:[{
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home/Home'
        }],
        isCollapse: false,
        menuData:[
        {
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home/Home'
        },
        {
          path: '/mall',
          name: 'mall',
          label: '商品管理',
          icon: 'video-play',
          url: 'MallManage/MallManage'
        },
        {
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
          url: 'UserManage/UserManage'
        },
        {
          label: '其他',
          icon: 'location',
          children: [
            {
              path: '/page1',
              name: 'page1',
              label: '页面1',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path: '/page2',
              name: 'page2',
              label: '页面2',
              icon: 'setting',
              url: 'Other/PageTwo'
            }
          ]
        }
      ]
      }
    },
    methods: {
      handleMenu(item) {
        // console.log(item);
        if(this.$route.path !== item.path && !(item.path === '/' && this.$route.path==='/home')){
          this.$router.push(item.path)
        }
        this.$store.commit('selectMenu',item)
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    computed: {
       // 没有子菜单
    noChildren() {
        return this.menuData.filter(item => !item.children)
    },
    // 有子菜单
    hasChildren() {
        return this.menuData.filter(item => item.children)
    },
    iscollapsMenu() {
      return this.$store.state.isCollapse

    },
    title() {
        return this.$store.state.isCollapse ? '后台':"后台管理系统"
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
.el-menu
  height 100vh
  color: #fff
  overflow hidden
  border: none
  h3
    line-height: 48px
    text-align: center
    font-size: 24px

</style>